<template>
  <div class="app-container">
    <!--    添加-->
    <div style="margin-bottom: 15px;">
      <el-input placeholder="输入要添加的分类，【左边是分类等级" v-model="input" class="input-with-select blog-type-container">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
        </el-select>
      </el-input>
      <el-button style="margin-left:10px;" type="primary" @click="addBlogTypeName_Handle">添加</el-button>
    </div>

    <!--分类-->
    <el-table :data="data" style="width: 100%" border>
      <!--      序号-->
      <el-table-column prop="date" label="序号" width="80" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <!--      博客类别-->
      <el-table-column prop=" description" align="center" label="博客类别">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <!--      文章数量-->
      <el-table-column prop=" description" align="center" label="文章数量">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.articleCount >= 0 ? scope.row.articleCount : 0 }}</span>
        </template>
      </el-table-column>

      <!--      操作-->
      <el-table-column prop="description" width="150" label="操作" align="center">
        <!--【删除】和【编辑】 按钮-->
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="top" :hide-after=1200>
            <el-button type="primary" icon="el-icon-edit" circle size="mini"
              @click="editBlogType_Handle(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="Delete" placement="top" :hide-after=1200>
            <el-button type="danger" icon="el-icon-delete" size="mini" circle
              @click.prevent="deleteBolgType_Handle(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--弹出表单-=-弹出表单-=-弹出表单-->
    <el-dialog title="编辑文章分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <!--分类名称-->
        <el-form-item label="编辑名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!--排序等级-->
        <el-select label="排序等级" v-model="form.order" placeholder="请选择">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
        </el-select>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="putBlogTypeInfo_Handle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 * blogType_API.addBlogType_API【添加分类】参数 data
 * blogType_API.delteBlogType_API【删除分类】参数 id
 * blogType_API.putBlogType_API【修改分类】参数 editInfo.id
 * blogType_API.getOneBlogType_API【获取 一个 分类】参数 id
 * blogType_API.getBlogType_API【获取文章分类】参数 无
 */

import * as blogType_API from "@/api/blogType.js"

export default {
  data() {
    return {
      input: '',
      select: '1',
      data: [],
      listLoading: false, //【加载logo】
      dialogFormVisible: false,
      form: {
        id: '',
        name: '',
        order: '',
        articleCount: ''
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 【拿 文章分类 数据】
    async fetchData() {
      this.listLoading = true
      const res = await blogType_API.getBlogType_API()
      this.listLoading = false
      this.data = res.data
      console.log(this.data, '【拿 文章分类 数据】')
    },
    // 添加分类
    async addBlogTypeName_Handle() {
      // 这里需要 分类名称 和 等级
      await blogType_API.addBlogType_API({ name: this.input, order: this.select })
      if (this.input) {
        this.$message.success(`【${this.input}】分类添加成功`);
        this.fetchData()
        this.input = ''
      } else {
        this.$message.error('需要写入分类名称');
      }
    },
    //   编辑文章分类
    async editBlogType_Handle({ id }) { //可以解构【看自己】
      // 我们用api
      const result = await blogType_API.getOneBlogType_API(id)
      this.form = result.data
      this.dialogFormVisible = true
      // console.log('根据id得到一篇分类', result, this.form)
    },
    // 确认修改了文章分类内容
    async putBlogTypeInfo_Handle() {
      await blogType_API.putBlogType_API({
        id: this.form.id,
        data: this.form
      }).then(() => {
        console.log("我确认修改了this.form-=-this.form文章分类内容:::", this.form)
        this.fetchData() //重新获取文章
        this.dialogFormVisible = false
        this.$message({
          type: 'success',
          message: '分类信息修改成功!'
        })
      })
    },
    //   删除文章分类
    deleteBolgType_Handle(data) { //可以写 解构成id
      console.log('删除文章分类', data.id, data.name)
      this.$confirm(`删除【${data.name}】分类后，则 文章分类名称 会变【未you分类】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await blogType_API.delteBlogType_API(data.id) //删除该分类
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.fetchData() //删除后重新获取文章
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.blog-type-container {
  width: 400px;
}
</style>
